import { Component } from 'react'
import ReactDOM from 'react-dom'

class HelloReact extends Component {
  state = {
    name: 'jack',
    assets: [
      { id: 1, name: '手机' },
      { id: 2, name: '耳机' }
    ],
    skill: ['vue', 'react'], // angular
    info: {
      age: 18,
      city: '武汉'
    }
  }

  hClick1 = () => {
    console.log(this.state.name)
    this.setState({
      name: '小花'
    })
  }
  // 3. 把手机改成电脑
  hClick3 = () => {
    const newAssets = [...this.state.assets]
    newAssets[0].name = '迪南奥'
    this.setState({
      assets: newAssets
    })
  }
  // 2. 把age改成20
  hClick2 = () => {
    const newInfo = { ...this.state.info, age: 20 }
    this.setState({
      info: newInfo
    })
  }
  // 5. 删除id为2的assets
  hClick5 = () => {
    const newAssets = this.state.assets.filter((it) => it.id === 1)
    this.setState({
      assets: newAssets
    })
  }
  // 4. 向skill中添加angular
  hClick4 = () => {
    const newSkill = [...this.state.skill]
    newSkill.push('agular')
    this.setState({
      skill: newSkill
    })
  }
  render() {
    const { name, assets, skill, info } = this.state
    return (
      <div>
        <p>姓名:{name}</p>
        <p>
          age：{info.age}, city:{info.city}
        </p>
        <div>
          资产:
          <ul>
            {assets.map((item) => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
        </div>
        <p>skill:{skill.join(', ')}</p>
        <hr />
        {/*
        1. 把name改成'小花'
        2. 把age改成20
        3. 把'手机'改成'电脑'
        4. 向skill中添加'angular'
        5. 删除id为2的assets */}
        <button onClick={this.hClick1}>1. 把name改成小花</button>
        <button onClick={this.hClick2}>2. 把age改成20</button>
        <button onClick={this.hClick3}>3. 把手机改成电脑</button>
        <button onClick={this.hClick4}>4. 向skill中添加angular</button>
        <button onClick={this.hClick5}>5. 删除id为2的assets</button>
      </div>
    )
  }
}

const app = (
  <div>
    app
    {/* 2.使用组件 */}
    <HelloReact />
  </div>
)

ReactDOM.render(app, document.getElementById('root'))
